<template>
  <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <div>
        <el-button
          style="float:right"
          type="primary"
          @click="handleSearchList()"
          size="mini"
        >
          查询搜索
        </el-button>
        <el-button
          style="float:right;margin-right: 15px"
          @click="handleResetSearch()"
          size="mini"
        >
          重置
        </el-button>
      </div>
      <div>
        <el-form
          :inline="true"
          :model="listQuery"
          size="mini"
          label-width="100px"
        >
          <el-form-item label="用户名称：">
            <el-input
              v-model="listQuery.nickname"
              class="input-width"
              placeholder="请输入用户名称"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="手机号码：">
            <el-input
              v-model="listQuery.phoneNo"
              class="input-width"
              placeholder="请输入手机号码"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="注册时间：">
            <el-date-picker
              v-model="listQuery.date"
              type="daterange"
              range-separator="至"
              clearable
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="状态：">
            <el-select v-model="listQuery.state" placeholder="请选择状态">
              <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>会员列表</span>
    </el-card>
    <div class="table-container member-container">
      <el-table
        ref="adminTable"
        :data="list"
        style="width: 100%;"
        v-loading="listLoading"
        size="mini"
        border
      >
        <el-table-column label="会员信息" width="280">
          <template slot-scope="scope">
            <div class="list-item">
              会员ID：{{ scope.row.id }} - [<span
                :class="scope.row.loginState == 1 ? 'green' : 'red'"
                >{{ scope.row.loginState == 1 ? "在线" : "离线" }}</span
              >] -
              {{ momentFormatTime(scope.row.lastLoginTime, "MM-DD hh:mm:ss") }}
            </div>
            <div class="list-item">
              账号：{{ scope.row.nickname }}（邀请码：{{
                scope.row.inviteCode
              }}）
            </div>
            <div class="list-item">电话号码：{{ scope.row.phoneNo }}</div>
            <div class="list-item">
              上级：{{ scope.row.parentPhoneNo || "-" }}
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column label="等级勋章" width="100" align="center">
          <template slot-scope="scope">
            <img
              :src="require(`@/assets/images/vip${scope.row.levelNum}.png`)"
              class="vip-img"
              alt=""
            />
          </template>
        </el-table-column> -->
        <el-table-column label="会员资料">
          <template slot-scope="scope">
            <div class="list-item">会员等级：{{ scope.row.levelNum }}</div>
            <div class="list-item">IP：{{ scope.row.lastLoginIp || "-" }}</div>
            <div class="list-item">
              位置：
              <span
                v-if="
                  scope.row.lastLoginAddress &&
                    JSON.parse(scope.row.lastLoginAddress).country
                "
              >
                {{ JSON.parse(scope.row.lastLoginAddress).country }}
                {{ JSON.parse(scope.row.lastLoginAddress).regionName }}
                {{ JSON.parse(scope.row.lastLoginAddress).city }}</span
              >
              <span v-else>-</span>
            </div>
            <div class="list-item">
              信誉分：<span class="green">{{ scope.row.credit }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="任务总览" width="160">
          <template slot-scope="scope">
            <!-- <div class="list-item">
              已接单：<span class="green">{{
                scope.row.orderReceived || 0
              }}</span>
            </div>
            <div class="list-item">
              已完成：<span class="green">{{
                scope.row.orderFinished || 0
              }}</span>
            </div>
            <div class="list-item">
              总任务：<span class="green">{{ scope.row.orderTotal || 0 }}</span>
            </div>
            <div class="list-item">
              已重置：<span class="green">{{ scope.row.countReset || 0 }}</span>
            </div> -->
            <div class="list-item">
              一级订单：<span class="green">{{ scope.row.orderLevel1 || 0 }}</span>
            </div>
            <div class="list-item">
              二级订单：<span class="green">{{ scope.row.orderLevel2 || 0 }}</span>
            </div>
            <div class="list-item">
              三级订单：<span class="green">{{ scope.row.orderLevel3 || 0 }}</span>
            </div>
            <div class="list-item">
              四级订单：<span class="green">{{ scope.row.orderLevel4 || 0 }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="会员收益" width="160">
          <template slot-scope="scope">
            <div class="list-item">
              余额：<span class="green">{{
                formatAmount(scope.row.balance)
              }}</span>
            </div>
            <div class="list-item">
              充值：<span class="green"
                >{{ formatAmount(scope.row.rechargeAmount) }}
              </span>
            </div>
            <div class="list-item">
              返佣：<span class="green">{{
                formatAmount(scope.row.oneselfRebate)
              }}</span>
            </div>
            <div class="list-item">
              下级返佣：<span class="green">{{
                formatAmount(scope.row.subLevelRebate)
              }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="会员详情" width="200">
          <template slot-scope="scope">
            <div class="list-item">
              会员状态：<span
                :class="[scope.row.state == 1 ? 'green' : 'red']"
                >{{ scope.row.state == 1 ? "正常" : "冻结" }}</span
              >
            </div>

            <div class="list-item">
              注册时间：{{ scope.row.createTime | formatDateTime }}
            </div>
            <div class="list-item">
              冻结资金：<span class="red">{{
                formatAmount(scope.row.freezeBalance)
              }}</span>
            </div>
            <div class="list-item">
              <span :class="[scope.row.state == 1 ? 'green' : 'red']">{{
                scope.row.dealState == 1 ? "允许提现" : "禁止提现"
              }}</span>
              <span class="green">[{{
                formatAmount(scope.row.withdrawAmount)
              }}]</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="300" align="right">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleUpdate(scope.row)"
              >编辑</el-button
            >
            <el-button
              v-if="false"
              size="mini"
              type="text"
              @click="
                handleCommand('continuousOrders', JSON.stringify(scope.row))
              "
              >连单</el-button
            >
            <!-- <el-button
              size="mini"
              type="text"
              @click="handleCommand('bankCard', JSON.stringify(scope.row))"
              >提款账号</el-button
            > -->
            <el-button
              size="mini"
              type="text"
              class="danger"
              @click="handleCommand('team', JSON.stringify(scope.row))"
              >查看团队</el-button
            >
            <el-button
              size="mini"
              type="text"
              class="danger"
              @click="handleCommand('account', JSON.stringify(scope.row))"
              >账变</el-button
            >
            <el-button
              size="mini"
              type="text"
              @click="handleCommand('feedback', JSON.stringify(scope.row))"
              >意见反馈</el-button
            >

            <el-button
              size="mini"
              type="text"
              @click="handleCommand('recharge', JSON.stringify(scope.row))"
              >会员充值</el-button
            >
            <el-button
              size="mini"
              type="text"
              @click="handleCommand('clock', JSON.stringify(scope.row))"
              >会员打卡</el-button
            >
            <el-button
              size="mini"
              type="text"
              @click="handleCommand('address', JSON.stringify(scope.row))"
              >收款地址</el-button
            >
            <el-button
              size="mini"
              type="text"
              @click="handleCommand('goods', JSON.stringify(scope.row))"
              >广告配置</el-button
            >
            <el-button
              size="mini"
              type="text"
              @click="handleCommand('order', JSON.stringify(scope.row))"
              >抢单记录</el-button
            >
            <el-button
              size="mini"
              type="text"
              @click="
                handleCommand('resetCommission', JSON.stringify(scope.row))
              "
              >重置佣金</el-button
            >
            <el-button
              size="mini"
              type="text"
              @click="
                handleCommand(
                  'resetCommissionCancel',
                  JSON.stringify(scope.row)
                )
              "
              >撤销重置</el-button
            >
            <el-button
              size="mini"
              type="text"
              class="danger"
              v-if="scope.row.state === 1"
              @click="handleOption(scope.row, 0)"
              >冻结</el-button
            >
            <el-button
              size="mini"
              type="text"
              v-else
              class="success"
              @click="handleOption(scope.row, 1)"
              >恢复</el-button
            >
            <el-button
              size="mini"
              type="text"
              class="danger"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
            <el-dropdown
              trigger="click"
              @command="
                e => {
                  handleCommand(e, JSON.stringify(scope.row));
                }
              "
            >
              <span class="el-dropdown-link">
                更多<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <!-- <el-dropdown-item command="continuousOrders"
                  >连单</el-dropdown-item
                > -->
                <!-- <el-dropdown-item command="bankCard"
                  >银行卡信息</el-dropdown-item
                > -->
                <!-- <el-dropdown-item command="team">查看团队</el-dropdown-item> -->
                <!-- <el-dropdown-item command="account">账变</el-dropdown-item> -->
                <!-- <el-dropdown-item command="recharge">会员充值</el-dropdown-item> -->
                <!-- <el-dropdown-item command="clock">会员打卡</el-dropdown-item> -->
                <!-- <el-dropdown-item command="order">抢单记录</el-dropdown-item> -->
                <!-- <el-dropdown-item command="resetCommission"
                  >重置抢单佣金</el-dropdown-item
                > -->
                <!-- <el-dropdown-item command="resetCommissionCancel"
                  >撤销重置</el-dropdown-item
                > -->
                <el-dropdown-item command="userPwd"
                  >更新登录密码</el-dropdown-item
                >
                <el-dropdown-item command="cashPwd"
                  >更新交易密码</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :current-page.sync="listQuery.pageNum"
        :page-size="listQuery.pageSize"
        :page-sizes="[5, 10, 15, 20]"
        :total="total"
      >
      </el-pagination>
    </div>

    <!-- 连单 -->
    <view-continuous-orders-dialog
      v-if="continuousOrdersVisible"
      :row="row"
      @handle-confirm="handleConfirm"
      @handle-cancel="continuousOrdersVisible = false"
    />

    <!-- 编辑 -->
    <edit-member-dialog
      v-if="updateVisible"
      :row="row"
      @handle-confirm="handleConfirm"
      @handle-cancel="updateVisible = false"
    />

    <!-- 银行卡 -->
    <add-bankCard-dialog
      v-if="bankCardVisible"
      :row="row"
      @handle-cancel="bankCardVisible = false"
    />

    <!--查看团队 -->
    <view-team-dialog
      v-if="teamVisible"
      :row="row"
      @handle-cancel="teamVisible = false"
    />

    <!--账变 -->
    <view-account-dialog
      v-if="accountVisible"
      :row="row"
      @handle-cancel="accountVisible = false"
    />

    <!--会员充值 -->
    <recharge-member-dialog
      v-if="rechargeVisible"
      @handle-confirm="handleConfirm"
      :row="row"
      @handle-cancel="rechargeVisible = false"
    />

    <!--打卡 -->
    <clock-member-dialog
      v-if="clockVisible"
      :row="row"
      @handle-confirm="handleConfirm"
      @handle-cancel="clockVisible = false"
    />

    <!--抢单记录 -->
    <order-member-dialog
      v-if="orderVisible"
      :row="row"
      @handle-cancel="orderVisible = false"
    />

    <!--编辑用户密码 -->
    <edit-userPwd-dialog
      v-if="userPwdVisible"
      :row="row"
      @handle-confirm="handleConfirm"
      @handle-cancel="userPwdVisible = false"
    />

    <!--编辑交易密码 -->
    <edit-cashPwd-dialog
      v-if="cashPwdVisible"
      :row="row"
      @handle-confirm="handleConfirm"
      @handle-cancel="cashPwdVisible = false"
    />

    <!-- 意见反馈 -->
    <edit-feedback-dialog
      v-if="feedbackVisible"
      :row="row"
      @handle-confirm="handleConfirm"
      @handle-cancel="feedbackVisible = false"
    />

    <!-- 收款地址 -->
    <edit-address-dialog
      v-if="addressVisible"
      :row="row"
      @handle-confirm="handleConfirm"
      @handle-cancel="addressVisible = false"
    />

    <!-- 广告配置 -->
    <edit-goods-dialog
      v-if="goodsVisible"
      :row="row"
      @handle-confirm="handleConfirm"
      @handle-cancel="goodsVisible = false"
    />
  </div>
</template>
<script>
import { formatAmount } from "@/utils/index";
import { formatDate, momentFormatTime } from "@/utils/date";
import EditMemberDialog from "./dialogs/edit-member-dialog.vue";
import RechargeMemberDialog from "./dialogs/recharge-member-dialog.vue";
import ClockMemberDialog from "./dialogs/clock-member-dialog.vue";
import OrderMemberDialog from "./dialogs/order-member-dialog.vue";
import AddBankCardDialog from "./dialogs/add-bankCard-dialog.vue";
import viewTeamDialog from "./dialogs/view-team-dialog.vue";
import viewAccountDialog from "./dialogs/view-account-dialog.vue";
import viewContinuousOrdersDialog from "./dialogs/view-continuous-orders-dialog.vue";
import EditUserPwdDialog from "./dialogs/edit-userPwd-dialog.vue";
import EditCashPwdDialog from "./dialogs/edit-cashPwd-dialog.vue";
import EditFeedbackDialog from "./dialogs/edit-feedback-dialog.vue";
import EditAddressDialog from "./dialogs/edit-address-dialog.vue";
import EditGoodsDialog from "./dialogs/edit-goods-dialog.vue";
import { createNamespacedHelpers } from "vuex";
import {
  getMemberList,
  enableMemberInfo,
  disableMemberInfo,
  deleteMemberInfo,
  resetCommission,
  revokeResetCommission
} from "@/api/member/index";

const { mapState } = createNamespacedHelpers("member");
const defaultListQuery = {
  pageNum: 1,
  pageSize: 10,
  nickname: null,
  phoneNo: null,
  state: null,
  date: null
};
export default {
  name: "memberList",
  components: {
    EditMemberDialog,
    AddBankCardDialog,
    viewTeamDialog,
    viewAccountDialog,
    RechargeMemberDialog,
    ClockMemberDialog,
    OrderMemberDialog,
    viewContinuousOrdersDialog,
    EditUserPwdDialog,
    EditCashPwdDialog,
    EditFeedbackDialog,
    EditAddressDialog,
    EditGoodsDialog
  },
  data() {
    return {
      listQuery: Object.assign({}, defaultListQuery),
      list: null,
      total: null,
      row: {},
      listLoading: false,
      bankCardVisible: false,
      continuousOrdersVisible: false,
      updateVisible: false,
      teamVisible: false,
      rechargeVisible: false,
      clockVisible: false,
      accountVisible: false,
      orderVisible: false,
      userPwdVisible: false,
      cashPwdVisible: false,
      feedbackVisible: false,
      addressVisible: false,
      goodsVisible: false
    };
  },
  computed: {
    ...mapState({
      statusOptions: state => [
        ...[{ label: "全部状态", value: null }],
        ...state.routes.statusOptions
      ]
    })
  },
  created() {
    this.getList();
  },
  filters: {
    formatDateTime(time) {
      if (time == null || time === "") {
        return "N/A";
      }
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm:ss");
    }
  },
  methods: {
    formatAmount,
    momentFormatTime,
    handleResetSearch() {
      this.listQuery = Object.assign({}, defaultListQuery);
      this.getList();
    },
    handleSearchList() {
      this.listQuery.pageNum = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.getList();
    },

    handleConfirm() {
      this.getList();
      this.bankCardVisible = false;
      this.updateVisible = false;
      this.rechargeVisible = false;
      this.clockVisible = false;
      this.userPwdVisible = false;
      this.cashPwdVisible = false;
      this.feedbackVisible = false;
      this.addressVisible = false;
    },
    //更多操作
    handleCommand(command, row) {
      this.row = JSON.parse(row);
      switch (command) {
        case "bankCard":
          this.bankCardVisible = true;
          break;
        case "team":
          this.teamVisible = true;
          break;
        case "account":
          this.accountVisible = true;
          break;
        case "resetOrder":
          this.handleResetOrder(this.row);
          break;
        case "recharge":
          this.rechargeVisible = true;
          break;
        case "clock":
          this.clockVisible = true;
          break;
        case "order":
          this.orderVisible = true;
          break;
        case "resetCommission":
          this.handleResetCommission(this.row);
          break;
        case "resetCommissionCancel":
          this.handleResetCommissionCancel(this.row);
          break;
        case "continuousOrders":
          this.continuousOrdersVisible = true;
          break;
        case "userPwd":
          this.userPwdVisible = true;
          break;
        case "cashPwd":
          this.cashPwdVisible = true;
          break;
        case "feedback":
          this.feedbackVisible = true;
          break;
        case "address":
          this.addressVisible = true;
          break;
        case "goods":
          this.goodsVisible = true;
          break;
        default:
          break;
      }
    },
    
    // 编辑
    handleUpdate(row) {
      this.row = row;
      this.updateVisible = true;
    },
    // 冻结/恢复
    handleOption(row, type) {
      this.$confirm(`是否要${type === 1 ? "恢复" : "冻结"}?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(async () => {
        if (type === 1) {
          await enableMemberInfo({ memberId: row.id });
        } else {
          await disableMemberInfo({ memberId: row.id });
        }
        this.$message({
          type: "success",
          message: `${type === 1 ? "恢复" : "冻结"}成功！`
        });
        this.getList();
      });
    },
    //重置佣金
    handleResetCommission(row) {
      this.$confirm("是否要重置佣金?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        resetCommission({ memberId: row.id }).then(response => {
          this.$message({
            type: "success",
            message: "重置佣金成功!"
          });
          this.getList();
        });
      });
    },
    //撤销重置佣金
    handleResetCommissionCancel(row) {
      this.$confirm("是否要撤销重置佣金?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        revokeResetCommission({ memberId: row.id }).then(response => {
          this.$message({
            type: "success",
            message: "撤销重置佣金成功!"
          });
          this.getList();
        });
      });
    },

    //删除
    handleDelete(row) {
      this.$confirm("是否要删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deleteMemberInfo({ memberId: row.id }).then(response => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
          this.getList();
        });
      });
    },
    //重置抢单
    handleResetOrder(row) {
      this.$confirm("是否要重置抢单?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        // deleteAdmin(row.id).then(response => {
        //   this.$message({
        //     type: 'success',
        //     message: '重置成功!'
        //   });
        //   this.getList();
        // });
      });
    },
    // 格式化状态
    formatState(value) {
      return this.statusOptions.find(item => item.value === value).label;
    },

    getList() {
      this.listLoading = true;
      getMemberList(this.listQuery)
        .then(response => {
          this.listLoading = false;
          this.list = response.data.list;
          this.total = response.data.total;
        })
        .catch(() => {
          this.listLoading = false;
        });
    }
  }
};
</script>
<style lang="scss">
.list-item {
  font-size: 12px;
}
.vip-img {
  height: 60px;
}
.el-dropdown-link {
  cursor: pointer;
  font-size: 12px;
  color: #85ce61;
  margin-left: 10px;
}
.member-container {
  height: calc(100vh - 242px);
  .el-table__body-wrapper {
    height: calc(100vh - 292px);
    overflow-y: auto;
  }
}
@media (max-width: 1500px) {
  .member-container {
    height: calc(100vh - 270px);
    .el-table__body-wrapper {
      height: calc(100vh - 320px);
      overflow: auto;
    }
  }
}
</style>
